<template>
  <div>
    <div class="container">
      <div class="container-left">
        <span>总共考试人数:</span>
        <span style="font-size: 50px">{{ exmaNum.allExam }}</span>
        <span>人</span>
      </div>
      <div class="container-right">
        <span>正在考试人数:</span>
        <span style="font-size: 50px">{{ exmaNum.wayExam }}</span>
        <span>人</span>
      </div>
    </div>
    <x-Table
        :loading="loading"
        :table-data="tableData"
        :options-data="options"
        :rule-form="ruleForms"
        :pagination="pagination"
        @handleAdd="handleAdd"
        @handlePaginationCurrentChange="handlePaginationCurrentChange"
        @handlePaginationSizeChange="handlePaginationSizeChange"
        @handleHeardDel="handleHeardDel"
        @searchForm="searchForm"
        @resetForm="resetForm"
    >
    </x-Table>
    <!--    弹窗区域-->
    <el-dialog
        v-dialog-drag
        title="查看"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="65%"
    >
      <div style="display: flex;justify-content:space-around">
        <div @click="onHandelControl" style="display:flex;align-items: center;flex-direction: column">
          <img src="../../../../assets/jiankong1.cc92dc49.png" alt="">
          <div style="font-weight: bold;margin-top: 10px">考试实时监控</div>
        </div>
        <div style="display:flex;align-items: center;flex-direction: column">
          <img src="../../../../assets/jiankong2.9d19ee71.png" alt="">
          <div style="font-weight: bold;margin-top: 10px">正在考试人数：<span
              style="color: deepskyblue;font-size: 18px">{{ examStatus.wayExam }}</span>人
          </div>
        </div>
        <div style="display:flex;align-items: center;flex-direction: column">
          <img src="../../../../assets/jiankong3.a0e0ce21.png" alt="">
          <div style="font-weight: bold;margin-top: 10px">已交卷考试人数：<span
              style="color: deepskyblue;font-size: 18px">{{ examStatus.referExam }}</span>人
          </div>
        </div>
        <div style="display:flex;align-items: center;flex-direction: column">
          <img src="../../../../assets/jiankong4.333dfe23.png" alt="">
          <div style="font-weight: bold;margin-top: 10px">应参加考试人数：<span
              style="color: deepskyblue;font-size: 18px">-</span>人
          </div>
        </div>
      </div>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this = null;
export default {
  data() {
    return {
      examId: '',// 当前考试批次id
      examStatus: {
        wayExam: '--', //正在考试人数
        referExam: '--' // 已交卷人数
      },
      exmaNum: {
        allExam: '--',
        wayExam: '--'
      }, // 考试数据
      dialogVisible: false,
      searchParams: {},//搜索对象
      tableData: [],
      loading: true,
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      ruleForms: {
        title: {label: "考试名称", prop: "title", type: "text"},
        // pattern: {
        //   label: "类型",
        //   prop: "pattern",
        //   type: "select",
        //   select: [{label: '考试', value: '1'}, {label: '作业', value: '0'}]
        // },
      },
      options: {
        buttonEdit: '编辑',
        buttonAdd: '添加',
        fields: {
          id: {label: "考试批次", prop: "id", width: "120", order: true},
          class_id: {label: "课程名称", prop: "class_id", type: 'two', options: {obj: 'OfficeClass', objKey: 'title'}},
          paper_id: {label: "试卷名称", prop: "paper_id", type: 'two', options: {obj: 'paper', objKey: 'title'}},
          title: {label: "考试名称", prop: "title",},
          duration: {label: "考试时长(分)", prop: "duration"},
          // pattern: {label: "类型", prop: "pattern"},
          start_time: {
            label: "考试开始时间",
            prop: "start_time",
          },
          end_time: {label: "考试结束时间", prop: "end_time"},
          create_at: {label: "创建时间", prop: "create_time", order: true},
          button: {
            label: "操作",
            width: "140",
            type: "func",
            fixed: true,
            buttonEdit: ['buttonEdit'],
            buttonDel: ['buttonDel'],
            options: [{
              label: '查看', handle: function (scope) {
                _this.examId = scope['row']['id']
                _this.examPerson(scope['row']['id'])
                _this.dialogVisible = true;
              }
            }, {
              label: '监考名单', handle: function (scope) {
                _this.getUserFromId(scope['row']['id']);
              }
            }],
          },
        },
      },
    }
  },
  methods: {

    onHandelControl: function () {
      if (this.examStatus.wayExam == '--'){
        return this.$message.info("数据加载中,请稍等...");
      }
      if (this.examStatus.wayExam <= 0) {
        return this.$message.error("当前暂无考试人员！");
      }
      this.dialogVisible = false;
      this.$emit('onHandelControl',this.examId);
    },

    resetForm: function () {
      _this.searchParams = {};
    },

    searchForm: function (val) {
      _this.searchParams = val;
      _this.getDataList(val);
    },
    handleHeardDel: function (val) {
      let data = [];
      val.forEach((item, index) => {
        data.push(item.id)
      })

    },
    handlePaginationCurrentChange: function (val) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.getDataList(_this.searchParams);

    },
    handlePaginationSizeChange: function (val) {
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.getDataList(_this.searchParams);
    },
    handleAdd: function (val) {

    },

    /**
     * 查询当前考试人数
     */
    examPerson: function (id) {
      _this.$store
          .dispatch("exam/examPerson", {
            website_id: 1,
            exam_id: id
          })
          .then((res) => {
            const {data} = res
            if (id) return this.examStatus = data;
            this.exmaNum = data;
          });
    },
    getDataList: function (param) {
      _this.loading = true;
      _this.$store
          .dispatch("exam/getExamSendList", param ? {
            title: param['title'],
            pattern: 1,
            page: _this.pagination["currentPage"],
            pageSize: _this.pagination["pageSize"],
          } : {
            pattern: 1,
            page: _this.pagination["currentPage"],
            pageSize: _this.pagination["pageSize"],
          })
          .then(() => {
            _this.loading = false;
            let data = this.$store.state.exam.examSendList;
            _this.tableData = data.data;
            _this.pagination["currentPage"] = data["current_page"];
            _this.pagination["total"] = data["total"];
          });
    },

    getUserFromId(id) {
      _this.$store
          .dispatch("exam/getUserFromId", {
            exam_id: id,
          })
          .then((res) => {
            const {data} = res;
            if (!data) return _this.$message.error("暂未分配监考名单！");
            _this.$emit('monitorRoll', {data: data.split(',')});
          });
    },

  },
  created() {
    _this = this;
    _this.getDataList();
    _this.examPerson();

  }
}
</script>

<style scoped lang="scss">
.container {
  margin-left: 20px;
  display: flex;

  .container-left {
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    color: white;
    width: 50%;
    height: 100px;
    background-color: #3a8ee6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .container-right {
    margin-left: 20px;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    color: white;
    width: 50%;
    height: 100px;
    background-color: #f44336;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
}
</style>
